<template>
  <div class="switch_box">
    <div class="switch_left" @click="changeOut" :class="{ switch_active: store.state.isOnShop }">{{ t('onShop') }}</div>
    <div class="switch_right" @click="changeOut" :class="{ switch_active: !store.state.isOnShop }">{{ t('outShop') }}</div>
  </div>
</template>
<script setup>
import { useStore } from "vuex";
import { ref, onMounted, computed, reactive } from "vue";
import { useI18n } from "vue-i18n";
const { locale, t } = useI18n();
const store = useStore();
const changeOut = () => {
  store.commit('changeIsOnShop', !store.state.isOnShop)
};
// 改变法币查询
</script>
<style lang="scss" scoped>
.switch_box {
  height: 22px;
  min-width: 70px;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  font-size: 10px;
  background: var(--bg-switch);
  color: var(--color-switch);

  .switch_left {
    height: 100%;
    box-sizing: border-box;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 8px;
  }

  .switch_right {
    height: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 8px;
    border-radius: 20px;
  }

  .switch_active {
    background: $primary-color;
    color: #fff;
    justify-content: center;
  }
}
</style>
  